<template>
  <div class="container">
    <div class="message-box">

      <div class="message-item" v-for="message in messageList" :key="message.id" @click="toInfo(message.groupId,
				message.sendId==userId?message.receiveId:message.sendId,message.type
				)">
        <van-swipe-cell>
          <div v-show="userId==message.sendId" class="message-item-head">
            <el-avatar :size="50" :src="message.receiveHeadImage"></el-avatar>
          </div>
          <div v-show="userId!=message.sendId" class="message-item-head">
            <el-avatar :size="50" :src="message.sendHeadImage"></el-avatar>
          </div>
          <div class="message-item-content">
            <div v-show="userId==message.sendId" class="content-sendNickName">
              {{message.receiveNickName.length>10?message.receiveNickName.substring(0,10)+'...':message.receiveNickName}}
            </div>
            <div v-show="userId!=message.sendId" class="content-sendNickName">
              {{message.sendNickName.length>10?message.sendNickName.substring(0,10)+'...':message.sendNickName}}
            </div>
            <div class="content-unRead">
              <el-badge :value="message.unRead" class="item" :max="99" :hidden="message.unRead==0">
                {{}}
              </el-badge>
            </div>
            <div class="content-content">
              {{message.newContent.length>10?message.newContent.substring(0,10)+'...':message.newContent}}
            </div>
            <div class="content-time">{{dateFormatUtil(message.createTime)}}</div>
          </div>
          <template #right>
            <van-button square type="danger" text="删除" @click="deleteMessage(message.groupId)" />
          </template>
        </van-swipe-cell>
      </div>
    </div>
  </div>
</template>

<script>
import { userId } from '../../base/index';
import { dateFormat } from '../../utils/index';
import { SwipeCell, Button } from 'vant';
import { ElMessage } from 'element-plus'
export default {
  name: "GMessage",
  data () {
    return {
      messageList: [],
      userId,
      messageClock: null,
    }
  },
  components: {
    VanSwipeCell: SwipeCell, VanButton: Button,
  },
  mounted () {
    this.getMessage();
    this.messageClock = setInterval(this.getMessage, 1000);
  },
  unmounted () {
    clearInterval(this.messageClock);
  },
  methods: {
    getMessage () {
      this.$axios.get("/message").then(res => {
        if (res.flag) {
          this.messageList = res.data;
        }
      })
    },
    dateFormatUtil (date) {
      return dateFormat(date, 4);
    },
    deleteMessage (groupId) {
      this.$axios.delete("/message/" + groupId).then(res => {
        console.log(groupId);
        if (res.flag) {
          ElMessage({
            message: res.msg,
            grouping: true,
            type: 'success',
            duration: 2000,
          });
        }
      })
    },
    toInfo (groupId, receiveId, type) {
      this.$router.push("/messageinfo/" + groupId + "/" + receiveId + "/" + type);
    },
  }
}
</script>

<style scoped>
.message-item {
  width: calc(100% - 10px);
  height: 50px;
  float: left;
  margin-top: 10px;
  margin-right: 10px;
}
.message-item-head {
  width: 70px;
  text-align: center;
  float: left;
}
.message-item-content {
  width: calc(100% - 70px);
  height: 50px;
  float: left;
}
.content-sendNickName {
  float: left;
  width: 70%;
  height: 25px;
  font-weight: bold;
  line-height: 25px;
}
.content-time {
  width: 30%;
  font-size: 14px;
  text-align: right;
  float: left;
  height: 25px;
  font-weight: none;
  line-height: 25px;
}
.content-content {
  float: left;
  width: 70%;
  height: 25px;
  line-height: 25px;
  font-size: 14px;
}
.content-unRead {
  float: left;
  text-align: right;
  width: calc(30% - 10px);
}
</style>